<template>
  <div
    v-if="icon.type === 'svg' && icon.content"
    v-html="icon.content"
    class="ac-icon"
    :style="{
      'font-size': size ? (size + 'px') : 'inherit',
      'color': color ? color : 'inherit'
    }"
  ></div>
  <img
    v-else-if="icon.type === 'base64' && icon.content"
    :src="'data:image/png;base64,' + icon.content"
    :height="size ? (size + 'px') : '30px'"
    alt=""
  />
</template>

<script setup>
import { ref, watch } from 'vue';
import { getIconList } from '@/utils/system';

const props = defineProps({
  modelValue: String,
  iconId: {
    type: String,
    default: ''
  },
  size: [Number, String],
  color: {
    type: String,
    default: ''
  },
  icon: {
    type: Object,
    default: null
  },
});

const icon = ref({});

const init = async () => {
  icon.value = '';
  if (props.icon) {
    icon.value = props.icon;
  } else if (props.iconId) {
    const iconList = await getIconList();
    icon.value = iconList.find(item => item.id === props.iconId) || {};
  } else if (props.modelValue) {
    const iconList = await getIconList();
    icon.value = iconList.find(item => item.id === props.modelValue) || {};
  }
};

watch(() => props, (data) => {
  init(data);
}, {immediate: true, deep: 1});
</script>

<style scoped>
.ac-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  font-size: inherit;
  width: 1em !important;
  height: 1em !important;
}

.ac-icon svg {
  width: 1em;
  height: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>